<template>
  <div class="phone-login-container">
    <div class="login-box">
      <div class="page-header">
        <div class="back-btn hover-scale" @click="$emit('back')">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回登录</span>
        </div>
        <div class="header-title">手机号登录</div>
      </div>
      
      <el-form ref="phoneFormRef" :model="phoneForm" :rules="rules" class="login-form">
        <el-form-item prop="phone">
          <el-input
            v-model="phoneForm.phone"
            placeholder="请输入手机号"
            :prefix-icon="Iphone"
            maxlength="11"
            @input="handlePhoneInput"
          />
        </el-form-item>
        
        <el-form-item prop="code">
          <div class="verify-code">
            <el-input
              v-model="phoneForm.code"
              placeholder="请输入验证码"
              :prefix-icon="Key"
              maxlength="6"
            />
            <el-button 
              type="primary" 
              class="code-btn hover-scale"
              :disabled="!canSendCode || countdown > 0"
              @click="sendCode"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            class="submit-btn hover-scale" 
            :loading="loading"
            @click="handleSubmit"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      
      <div class="login-tips">
        <p>温馨提示：</p>
        <ul>
          <li>未注册的手机号将自动创建账号</li>
          <li>注册即代表同意《用户协议》和《隐私政策》</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ArrowLeft, Iphone, Key } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const emit = defineEmits(['back', 'login-success']);

const phoneFormRef = ref(null);
const loading = ref(false);
const countdown = ref(0);

const phoneForm = reactive({
  phone: '',
  code: ''
});

const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
  ]
};

const canSendCode = computed(() => {
  return /^1[3-9]\d{9}$/.test(phoneForm.phone);
});

// 处理手机号输入
const handlePhoneInput = (value) => {
  phoneForm.phone = value.replace(/[^\d]/g, '');
};

// 发送验证码
const sendCode = async () => {
  try {
    await phoneFormRef.value.validateField('phone');
    // 这里调用发送验证码的接口
    // await sendPhoneCode(phoneForm.phone);
    
    ElMessage.success('验证码发送成功');
    startCountdown();
  } catch (error) {
    console.error('发送验证码失败:', error);
  }
};

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 提交表单
const handleSubmit = async () => {
  if (!phoneFormRef.value) return;
  
  try {
    await phoneFormRef.value.validate();
    loading.value = true;
    
    // 这里调用手机号登录的接口
    // const { data } = await phoneLogin(phoneForm);
    // emit('login-success', data);
    
    // 模拟登录成功
    const mockData = {
      token: 'mock_token',
      userInfo: {
        name: '测试用户',
        role: 'student'
      },
      student_class: {
        class_name: '测试班级'
      }
    };
    
    localStorage.setItem('pz_token', mockData.token);
    localStorage.setItem('pz_userInfo', JSON.stringify(mockData.userInfo));
    localStorage.setItem('student_class', JSON.stringify(mockData.student_class));
    
    ElMessage.success('登录成功！');
    router.push('/Main');
  } catch (error) {
    console.error('登录失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.phone-login-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .login-box {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    
    .page-header {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      
      .back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #409EFF;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        
        .el-icon {
          font-size: 18px;
        }
        
        &:hover {
          transform: translateX(-5px);
          opacity: 0.8;
        }
      }
      
      .header-title {
        margin-left: auto;
        font-size: 24px;
        font-weight: 600;
        color: #1a1a1a;
      }
    }
    
    .login-form {
      margin-top: 32px;
      
      :deep(.el-input__wrapper) {
        background-color: #f5f7fa;
        border-radius: 8px;
        box-shadow: none !important;
        border: 1px solid #e4e7ed;
        padding: 0 15px;
        
        &:hover {
          border-color: #409eff;
        }
        
        &.is-focus {
          border-color: #409eff;
          border-width: 1px;
          box-shadow: 0 0 0 1px #409eff !important;
        }
      }
      
      :deep(.el-input__inner) {
        height: 44px;
      }
      
      .verify-code {
        display: flex;
        gap: 12px;
        
        .el-input {
          flex: 1;
        }
        
        .code-btn {
          width: 120px;
          height: 44px;
          border-radius: 8px;
          
          &:disabled {
            background-color: #a0cfff;
            border-color: #a0cfff;
            color: #fff;
          }
        }
      }
      
      .submit-btn {
        width: 100%;
        height: 44px;
        font-size: 16px;
        border-radius: 8px;
        margin-top: 24px;
      }
    }
    
    .login-tips {
      margin-top: 32px;
      padding: 16px;
      background-color: #f5f7fa;
      border-radius: 8px;
      
      p {
        color: #606266;
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      ul {
        padding-left: 20px;
        
        li {
          color: #909399;
          font-size: 12px;
          line-height: 1.8;
        }
      }
    }
  }
}
</style> 